<template>
  <div id="index">
    <el-row>
      <!--左侧部分 -->
      <el-col :span="5" id = "left" style="left: 0px;">
        <el-row >
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">停车场趟次均值</div>
                </el-col>
              </el-row>
              <div id="chart1" v-popover:fea_chart1 class="chart"></div>
              <el-popover
                ref="fea_chart1"
                placement="right"
                trigger="click">
                <el-table
                  :data="pa_tab"
                  id = "fea_tab"
                  height="96%"
                  style="max-height: 60vh">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="时间段"
                    :width="t_w1">
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场1">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.31)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场2">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.88)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场3">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.43)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场4">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.12)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场5">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.32)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场6">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.78)}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">停车场进出车时点特征分布</div>
                </el-col>
              </el-row>
              <div id="chart2" v-popover:fea_chart2 class="chart"></div>
              <el-popover
                ref="fea_chart2"
                placement="left"
                trigger="click">
                <el-table
                  :data="pa_tab"
                  id = "fea_tab2"
                  height="96%"
                  style="max-height: 46vh">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="时间段"
                    :width="t_w1">
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="进车辆数">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.31)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="出车辆数">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.88)}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <div class="clear"></div>
      <!--地图部分 -->
        <el-col :span="24">
          <div class = "chart_center " style="position: absolute;top: 10vh;z-index: 100;height:7vh;width:26vw;">
            <el-row>
              <el-col :span="24"  id = "legendBox_legend" style="margin-left: 90%">
                <div class = "legendBox">
                  <p  v-popover:popover1 style="background-color: #02ff00"></p>
                  <p style="color: #02ff00">&nbsp;大于600</p>
                  <el-popover
                    ref="popover1"
                    placement="right"
                    trigger="hover"
                    content="大于600">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover2 style="background-color: #b2ff00"></p>
                  <el-popover
                    ref="popover2"
                    placement="right"
                    trigger="hover"
                    content="500 - 600">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover3 style="background-color: #00fcff"></p>
                  <el-popover
                    ref="popover3"
                    placement="right"
                    trigger="hover"
                    content="400 - 500">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover4 style="background-color: #fff700"></p>
                  <el-popover
                    ref="popover4"
                    placement="right"
                    trigger="hover"
                    content="300 - 400">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover5 style="background-color: #ffb200"></p>
                  <el-popover
                    ref="popover5"
                    placement="right"
                    trigger="hover"
                    content="200 - 300">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover6 style="background-color: #ff6600"></p>
                  <el-popover
                    ref="popover6"
                    placement="right"
                    trigger="hover"
                    content="100 - 200">
                  </el-popover>
                </div>
                <div class = "legendBox">
                  <p  v-popover:popover7 style="background-color: #ff1100"></p>
                  <p style="color: #ff1100">&nbsp;小于100</p>
                  <el-popover
                    ref="popover7"
                    placement="right"
                    trigger="hover"
                    content="小于100">
                  </el-popover>
                </div>
              </el-col>
            </el-row>
          </div>
          <div id="allmap" ref="allmap"></div>
        </el-col>
      <!--右侧部分 -->
      <el-col :span="5" id = "right" style="right: 0px;">
        <el-row>
          <el-col :span="24">
            <div class = "chart_right chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">停车趟次分布</div>
                </el-col>
              </el-row>
              <div id = "chart3" class = "chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">剩余泊位趋势分析</div>
                </el-col>
              </el-row>
              <div id = "chart4" v-popover:fea_chart4 class = "chart"></div>
              <el-popover
                ref="fea_chart4"
                placement="left"
                trigger="click">
                <el-table
                  :data="pa_tab"
                  id = "fea_tab1"
                  height="96%"
                  style="max-height: 46vh;">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="时间段"
                    :width="t_w1">
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场1">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.31)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场2">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.88)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场3">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.43)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场4">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.12)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场5">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.32)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场6">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.78)}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TMap } from '../TMap';
  import jq from 'jquery';
  import axios from 'axios';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {config,xAxis,xAxiss,yAxis,yAxiss,grid,tooltip1,tooltip,legend,dotHtml} from '../../static/js/config/chartConfig.js';
  var echarts = require('echarts');


  var tab = [{"time":'7:00-8:00',"num":500},{"time":'8:00-9:00',"num":488},{"time":'9:00-10:00',"num":455},{"time":'10:00-11:00',"num":432}
    ,{"time":'11:00-12:00',"num":399},{"time":'12:00-13:00',"num":367},{"time":'13:00-14:00',"num":366},{"time":'14:00-15:00',"num":355},{"time":'15:00-16:00',"num":300}
    ,{"time":'16:00-17:00',"num":456},{"time":'17:00-18:00',"num":500},{"time":'18:00-19:00',"num":555}];
  export default {
    name:"index",
    components: {

    },
    data(){
      return{
        pa_tab:tab,
        t_w1:'500px',
        t_w2:'500px',
      }
    },
    mounted () {
      this.t_w1 =config().fontSize*10+'px'
      this.t_w2 =config().fontSize*8+'px'
      this.map();
      this.chart1();
      this.chart2();
      this.chart3();
      this.chart4();
    },
    methods: {
      map(){
        var p = parks();
        var point  = {'max':8,'min':0,'data':[
            {"lat":29.721545,"lng":106.543758,"value":1000},
            {"lat":29.717389,"lng":106.539831,"value":1500},
            {"lat":29.714967,"lng":106.535861,"value":889},
            {"lat":29.714296,"lng":106.536419,"value":768},
            {"lat":29.714669,"lng":106.537578,"value":235},
            {"lat":29.712451,"lng":106.537664,"value":349},
            {"lat":29.713476,"lng":106.539617,"value":769},
            {"lat":29.714165,"lng":106.539016,"value":412}
          ]};
        TMap('KLUBZ-D3F2X-G3Z4G-Z3HIY-YVT62-TGBMI').then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717986,106.543071),
            zoom: 15,
            mapStyleId: 'style1',
            disableDefaultUI: true,    //禁止所有控件
          });
          //停车场轮廓
          var c = [593,456,312,623,321,78,113,211,667,70,90,311,555,333,263,124,34]
          var color = ['#02ff00','#b2ff00','#00fcff','#f7ff00','#ffb200','#ff6600','#ff1100'];
          for(var i = 0;i < p.length; i++) {
            (function(v){
              var path = []
              var cl = color[2]
              if(c[v]>=600){
                cl = color[0]
              }else if(c[v]>=500 &&c[v]< 600){
                cl = color[1]
              }else if(c[v]>=400 &&c[v]< 500){
                cl = color[2]
              }else if(c[v]>=300 &&c[v]< 400){
                cl = color[3]
              }else if(c[v]>=200 &&c[v]< 300){
                cl = color[4]
              }else if(c[v]>=100 &&c[v]< 200){
                cl = color[5]
              }else {
                cl = color[6]
              }
              for (var j = 0; j < p[v].path.length; j++) {
                path.push(new qq.maps.LatLng(p[v].path[j][0],p[v].path[j][1]))
              }
              var polygon = new qq.maps.Polygon({
                map: map,
                path: path,
                strokeWeight: 0,
                zIndex: 1000,
                strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
                fillColor: qq.maps.Color.fromHex(cl, 0.8)
              });
              var center = new qq.maps.LatLng(p[v].center[0],p[v].center[1]);
              var label = new qq.maps.Label({
                position: center,
                map: map,
                content: '<div class = "tit">'+p[v].name+'</div>'
              });
              var infoWin = new qq.maps.InfoWindow({
                map: map
              });
              qq.maps.event.addListener(polygon, 'click', function() {
                infoWin.open();
                infoWin.setContent('<div class = "mk" style="text-align:center;white-space:'+
                  'nowrap;margin:10px;color: #000fff;">' +
                  p[v].name + ' 停车场<br/>车位数：'+c[v]+' 个<br/>停车数：'+Math.ceil(c[v]*0.78)+'辆<br/>占比： '+(Math.ceil(Math.ceil(c[v]*0.78)*0.78)/Math.ceil(c[v]*0.78)*100).toFixed(2)+' %</div>');
                infoWin.setPosition(center);
              });
            })(i);
          }

          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            //jq('.tit').css('font-size',si['f'+zoomLevel]+'vh')
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
          });
          //国博馆轮廓
          for (var n = 0; n < venue().length; n++) {
            var ph = []
            for (var k = 0; k < venue()[n].path.length; k++) {
              ph.push(new qq.maps.LatLng(venue()[n].path[k][0], venue()[n].path[k][1]))
            }
            var cl1 = '#a2a6a7'
            var c1 = 0.4
            var bw = 0
            if(n == 0){
              c1 = 0.001
              bw = 2
            }
            if(n > 2){
              c1 = 0.8
              bw = 0
              cl1 = '#1281D5'
            }
            var polygon2 = new qq.maps.Polygon({
              map: map,
              path: ph,
              strokeWeight: bw,
              strokeDashStyle: 'dash',
              strokeColor: '#a2ecfb',
              fillColor: qq.maps.Color.fromHex(cl1, c1)
            });
          }
        });
        jq(function(){
          jq("#allmap").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmap .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });

      },
      fea(i){
        alert(i)
        var chart1 = echarts.init(document.getElementById('fea'+i));
        var option = {
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color:['#8fc31f','#f35833'],

          series : [
            {
              name: '签到比例分析',
              type: 'pie',
              radius : '55%',
              center: ['40%', '50%'],
              data:[
                {value:335, name:'准时'},
                {value:310, name:'迟到'}
              ],
              label: {
                normal: {
                  show: false
                }
              },
            }
          ]
        };
        chart1.setOption(option)
        window.onresize = chart1.resize;
      },
      chart1(){
        var data1 = [300,800,2000,3000,2200,2000,2600,2800,2300,1600,1200,800,200];
        var xData  = ["6:00-7:00","7:00-8:00","8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00"];
        var data2 = []
        for (let i = 0; i < data1.length; i++) {
          data2.push(Math.max.apply(null,data1)*0.15)
        }
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option = {
          tooltip:{
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color.colorStops[0].color) +  params[0].seriesName + '：' +  params[0].data
              return result
            }
          },
          color: ["rgba(5,93,156,0.6)"],
          grid: grid(20),
          yAxis:yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name: "趟次均值",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            itemStyle:{
              normal:{
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#007aff" // 0% 处的颜色
                },
                  {
                    offset: 1,
                    color: "#54d0f3" // 100% 处的颜色
                  }], false)
              }
            },
            z:100,
            data: data1
          }]
        };
        chart1.setOption(option)
        window.onresize = chart1.resize;
      },
      chart2(){
        var chart2 = echarts.init(document.getElementById('chart2'));
        var xData = ['6:00', '6:30','7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30',"19:00",'19:30'];
        var data1 = [200,280,500,700,900,1200,1600,1000,800,600,300,200,50,30,200,300,200,100,80,60,20,10,0,0,0,0,0,0];
        var data2 = [0,0,0,0,0,0,0,0,0,10,600,1500,1800,1000,100,80,120,90,300,1000,2600,3600,2000,1500,800,300,600,800];
        var option = {
          tooltip:{
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color.colorStops[0].color) +  params[0].seriesName + '：' +  params[0].data +'辆' +
                "</br>" + dotHtml(params[1].color.colorStops[0].color) +  params[1].seriesName + '：' +  params[1].data +'辆'
              return result
            }
          },
          legend: legend(['进车数量', '出车数量'],1),
          grid:  grid(),
          yAxis:yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name: '进车数量',
            type: 'line',
            //smooth: true,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            //showSymbol: false,
            lineStyle: {
              normal: {
                width: config().lineWidth
              }
            },

            itemStyle: {
              normal: {

                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(16,97,204,1)'
                }, {
                  offset: 1,
                  color: 'rgba(17,235,210,1)'
                }])
              },
              emphasis: {
                color: 'rgb(0,196,132)',
                borderColor: 'rgba(0,196,132,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
              }
            },
            data: data1
          }, {
            name: '出车数量',
            type: 'line',
            //smooth: true,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            //showSymbol: false,
            lineStyle: {
              normal: {
                width:  config().lineWidth
              }
            },
            itemStyle: {
              normal: {

                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(205,52,42,1)'
                }, {
                  offset: 1,
                  color: 'rgba(235,235,21,1)'
                }])
              },
              emphasis: {
                color: 'rgb(99,250,235)',
                borderColor: 'rgba(99,250,235,0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10
              }
            },
            data: data2
          }  ]
        };
        chart2.setOption(option)
        window.onresize = chart2.resize;
      },
      chart3(){
       var chart3 = echarts.init(document.getElementById('chart3'));
        chart3.setOption({
          legend:{
            itemWidth: config().legendWidth,
            itemHeight: config().legendHeight,
            icon:'square',
            data: ['200以内','200-300','300-400','400-500','500以上'],
            orient: 'vertical',
            x:'75%',
            textStyle: {
              fontSize: config().legendFontSize,
              color: config().legendColor
            }},
          color:['#1658ff', '#52fcfc','#fbce00','#8ad0ff','#0399fd'],
          series: [{
            type: 'pie',
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ['50%', '60%'],
            center:['35%','50%'],
            avoidLabelOverlap: false,
            labelLine:{
                normal:{
                  length:config().lineWidth*8,
                    lineStyle: {
                      width:config().lineWidth*0.5
                  }
                }
            },
            label: {
              normal: {
                show: true,
                position: 'left',
                formatter: '{c}',
                fontSize:config().toolFontSize,
                rich: {
                  text: {
                    fontSize: config().fontSize,
                    align: 'center',
                    verticalAlign: 'middle',
                    padding: 15
                  },
                  value: {
                    fontSize: config().fontSize,
                    align: 'center',
                    verticalAlign: 'middle',
                  },
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: config().fontSize,
                }
              }
            },
            data:[
              {value:3, name:'200以内'},
              {value:5, name:'200-300'},
              {value:4, name:'300-400'},
              {value:3, name:'400-500'},
              {value:2, name:'500以上'},
            ]
          }]
        })
        window.onresize = chart3.resize;
      },
      chart4(){
        var xData  = ["9:00","9:05","9:10","9:15","9:20","9:25","9:30","9:35","9:40","9:45","9:50","9:55","10:00"];
        var data =[2000,1800,1600,1200,890,600,550,400,300,260,200,120];
        var chart4 = echarts.init(document.getElementById('chart4'));
        var option = {
          tooltip:  {
            trigger: "axis",
            axisPointer: config().axisPointer,
            textStyle: config().textStyle,
            formatter: function(params) {
              var result = params[0].name
              result += "</br>" + dotHtml(params[0].color) + params[0].seriesName + '：' + params[0].data + '个'
              return result}
          },
          grid: grid(),
          yAxis:yAxiss({'data':'','name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          xAxis: xAxiss({'data':xData,'name':'','lineShow':true,'labelShow':true,'position':'','unit':'',"splitLineShow":false,"splitLineType":'dashed',"splitLineColor":''}),
          series: [{
            name:'剩余泊位',
            data: data,
            type: 'line',
            symbolSize: config().symbolSize,
            color: '#0396f8',
            lineStyle: {
              color: "#0396f8",
              width: config().lineWidth
            },
            areaStyle: {
              color: 'rgba(1,98,133,0.6)'
            }
          }, {
            type: 'bar',
            animation: false,
            barWidth: config().lineWidth*0.5,
            hoverAnimation: false,
            data: data,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#91EAF2' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#074863' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                label: {
                  show: false
                }
              }
            }
          }]
        };
        chart4.setOption(option)
        window.onresize = chart4.resize;
      }
  }
}
</script>
<style lang="scss" scoped>
  #index{
    width: 100%;
    height: 97vh;
    *{margin: 0;padding: 0;}
    #left,#right{
      position: absolute;
      z-index: 1;
      top:16vh;
      /*background: rgba(12,27,63,0.73);*/
    }
    .chart{
      height: 85.5%;
    }
    .chart_left{
      height: 35vh;
      background: #07213b;
       margin:0.5vh 0.5vh 2vh 0.5vh!important;
    }
    .chart_right{
      height: 35vh;
       margin:0.5vh 0.5vh 2vh 0.5vh!important;
    }
    #allmap{
      height: 100vh;
      overflow: hidden;
    }
    .legendBox{
      display: flex;
      align-items: center;
      /*justify-content: center;*/
      font-size: 0.7vw;
      color: #AFB8D2;
      margin-top: 0.1vh;
      width: 25%;
      p:nth-child(1){
        width: 1.2vw;
        height: 0.7vw;
      }
    }

    .leg1{
      p:nth-child(1){background: #4CE4E9;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #FF2661;}
    }
    .leg2{
      p:nth-child(1){background: #F32056;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){ color: #FBCE00;}
    }
    .leg3{
      p:nth-child(1){background: #E88216;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #0399FD;}
    }
  }
</style>
